<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style>
			#user {
				background-color: #0088BB;
			}
			
			.mui-title {
				color: #FFFFFF
			}
			
			/*exit {
				color: #FFFFFF
			}
			*/
			
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
				padding-top: 0px;
				padding-right: 0px;
				padding-bottom: 0px;
				padding-left: 0px;
			}
		</style>
	</head>

	<body>
		<!--顶部栏-->
		<header class="mui-bar mui-bar-nav" id="user">
			<!--<a class="mui-icon mui-icon-bars" id="sideMenu"></a>-->
			<a id="exit" class="mui-icon mui-icon-close mui-pull-right"></a>
			<h1 class="mui-title" id="title">功能管理{{name}}</h1>
		</header>
		<!--底部选项栏-->
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="function.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">功能管理</span>
			</a>
			<a class="mui-tab-item" href="infor.html">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">信息查询</span>
			</a>
			<a class="mui-tab-item" href="personal.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">个人信息</span>
			</a>
		</nav>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/app.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			//mui.init({
			//	keyEventBind: {
			//		backbutton: false //关闭back按键监听
			//	}
			//});
			mui.init({
				swipeBack: false
			});
			var subpages = ["function.html", "infor.html", "personal.html"];
			var aniShow = {};
			var subpage_style = {
				top: "45px",
				bottom: "50px",
				scrollIndicator: "none"
			};
			mui.plusReady(function() {

				var main = plus.webview.currentWebview();
				document.querySelector('header').addEventListener('doubletap', function() {
					main.children()[0].evalJS('mui.scrollTo(0, 100)');
				});

				for(var i = 0; i < 3; i++) {

					var temp = {};
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);

					if(i > 0) {
						sub.hide();
					} else {
						temp[subpages[i]] = "true";
						mui.extend(aniShow, temp);
					}
					main.append(sub);
				}

				document.getElementById('exit').addEventListener('tap', function() {
					if(mui.os.ios) {
						app.setState({});
						mui.openWindow({
							url: '../..login.html',
							id: 'login',
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							}
						});
						return;
					}
					var btnArray = [{
						title: "注销当前账号"
					}, {
						title: "直接关闭应用"
					}];
					plus.nativeUI.actionSheet({
						cancel: "取消",
						buttons: btnArray
					}, function(event) {
						var index = event.index;
						switch(index) {
							case 1:
								localStorage.clear();
								plus.runtime.restart();
								break;
							case 2: //
								plus.runtime.quit();
								break;

								plus.webview.getLaunchWebview().show("pop-in");

								break;
							case 2:
								plus.runtime.quit();
								break;
						}
					});
				}, false);

				//获取当前网络类型
				document.addEventListener("netchange", onNetChange, false);

			});

			function onNetChange() {　　 //获取当前网络类型
				　　
				var nt = plus.networkinfo.getCurrentType();　　
				switch(nt) {　　　　
					case plus.networkinfo.CONNECTION_ETHERNET:
						　　　　
					case plus.networkinfo.CONNECTION_WIFI:
						　　　　　　mui.alert("当前网络为WiFi");　　　　　　
						break;　　　　
					case plus.networkinfo.CONNECTION_CELL2G:
						　　　　
					case plus.networkinfo.CONNECTION_CELL3G:
						　　　　
					case plus.networkinfo.CONNECTION_CELL4G:
						　　　　　　mui.alert("当前网络非WiFi");　　　　　　
						break;　　　　
					default:
						　　　　　　mui.alert("当前没有网络");　　　　　　
						break;　　
				}
			}

			//获取当前设备的网络类型
			function plusReady() {
				var types = {};
				types[plus.networkinfo.CONNECTION_UNKNOW] = "Unknown connection";
				types[plus.networkinfo.CONNECTION_NONE] = "None connection";
				types[plus.networkinfo.CONNECTION_ETHERNET] = "Ethernet connection";
				types[plus.networkinfo.CONNECTION_WIFI] = "WiFi connection";
				types[plus.networkinfo.CONNECTION_CELL2G] = "Cellular 2G connection";
				types[plus.networkinfo.CONNECTION_CELL3G] = "Cellular 3G connection";
				types[plus.networkinfo.CONNECTION_CELL4G] = "Cellular 4G connection";
				alert("Network: " + types[plus.networkinfo.getCurrentType()]);
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}

			//获取用户名
			var user = localStorage.getItem("user")
			var app = new Vue({
				el: '#user',
				data: {
					name: "(" + user + ")"
				}
			})

			//当前激活选项
			var activeTab = subpages[0];
			var title = document.getElementById("title");
			//选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				if(targetTab == activeTab) {
					return;
				}
				//更换标题

				title.innerHTML = this.querySelector('.mui-tab-label').innerHTML + "(" + user + ")";

				//显示目标选项卡
				//若为iOS平台或非首次显示，则直接显示
				if(mui.os.ios || aniShow[targetTab]) {
					plus.webview.show(targetTab);
				} else {
					//否则，使用fade-in动画，且保存变量
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow, temp);
					plus.webview.show(targetTab, "fade-in", 300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;

			});
			//自定义事件，模拟点击“首页选项卡”
			document.addEventListener('gohome', function() {
				var defaultTab = document.getElementById("defaultTab");
				//模拟首页点击
				mui.trigger(defaultTab, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(defaultTab !== current) {
					current.classList.remove('mui-active');
					defaultTab.classList.add('mui-active');
				}
			});

			/**
			 * Android返回键处理（IOS只能通过home键来杀掉程序）
			 * 返回逻辑：一秒内连续点击两次，退出程序；
			 * 这个官方已经写的很明白了，这里需要加上这一段代码，防止返回到入口页面；
			 * http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quit
			 */
			var first = null;
			mui.back = function() {
				if(!first) {
					first = new Date().getTime();
					//					plus.nativeUI.toast("再按一次退出应用");
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			}
			//备份mui.back，mui.back已将窗口关闭逻辑封装的比较完善（预加载及父子窗口），因此最好复用mui.back
			//			var old_back = mui.back;
			//			mui.back = function() {
			//				var btn = ["确定", "取消"];
			//				mui.confirm('确认关闭当前窗口？', 'Hello MUI', btn, function(e) {
			//					if(e.index == 0) {
			//						//执行mui封装好的窗口关闭逻辑；
			//						old_back();
			//					}
			//				});
			//			}
			/**
			 * 账号自动切换8:15
			 */
			window._SS = setInterval(function() {
				var t = new Date();
				if(t.getHours() == 8 && t.getMinutes() == 15) {
					localStorage.clear();
					plus.runtime.restart();
				}
				if(t.getHours() == 8 && t.getMinutes() == 13) {
					mui.alert("2分钟后logoff")
				}
			}, 60 * 1000);
		</script>
	</body>

</html>